<template>
  <el-drawer v-model="drawer" title="查看人员详情" size="50%">
    <el-row>
      <el-col :span="2" class="img">
        <el-avatar :size="50" :src="storeEmployeeInfo.avatar" />
      </el-col>
      <el-col :span="20" class="info">
        <span class="info_item">{{ storeEmployeeInfo.systemUserName }}</span>
        <span class="info_item">{{ storeEmployeeInfo.phone }}</span>
        <Icon icon="svg-icon:sex_man" class="mr-5px" v-if="storeEmployeeInfo.sex == 1" />
        <Icon icon="svg-icon:sex_man" class="mr-5px" v-if="storeEmployeeInfo.sex == 2" />
        <br />
        <el-tag type="info">从业{{ storeEmployeeInfo.serviceYear }}年</el-tag>
        <el-tag type="info">{{ storeEmployeeInfo.levelLable }}</el-tag>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="资料" name="first">
        <el-form :model="storeEmployeeInfo">
          <el-card style="max-width: 100%" shadow="always">
            <template #header>
              <div class="card-header">
                <span>绑定员工</span>
              </div>
            </template>

            <el-row>
              <el-col :span="8">
                <el-form-item label="员工id">
                  {{ storeEmployeeInfo.id }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="员工姓名">
                  {{ storeEmployeeInfo.systemUserName }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="员工角色"> 美发师 </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card style="max-width: 100%" shadow="always">
            <template #header>
              <div class="card-header">
                <span>实名信息</span>
              </div>
            </template>
            <el-row>
              <el-col :span="8">
                <el-form-item label="手机号">
                  {{ storeEmployeeInfo.phone }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="真实姓名">
                  {{ storeEmployeeInfo.systemUserName }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="身份证号">
                  {{ storeEmployeeInfo.idCard }}
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card style="max-width: 100%" shadow="always">
            <template #header>
              <div class="card-header">
                <span>可做项目</span>
              </div>
            </template>
            <el-row>
              <el-col
                :span="3"
                v-for="(projectItem, index) in storeEmployeeInfo.project"
                :key="index"
              >
                <el-tag>{{ projectItem.projectName }}</el-tag>
              </el-col>
            </el-row>
          </el-card>
          <el-card style="max-width: 100%" shadow="always">
            <template #header>
              <div class="card-header">
                <span>合规信息</span>
              </div>
            </template>
            <el-row>
              <el-col :span="24">
                <el-form-item label="商户名称">
                  {{ storeEmployeeInfo.storeOwnName }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="营业执照">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="storeEmployeeInfo.businessLicenseUrl"
                    :preview-src-list="new Array(storeEmployeeInfo.businessLicenseUrl)"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :initial-index="4"
                    fit="cover"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="健康证">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="storeEmployeeInfo.healthCertificateUrl"
                    :preview-src-list="new Array(storeEmployeeInfo.healthCertificateUrl)"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :initial-index="4"
                    fit="cover"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="技术证书">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="storeEmployeeInfo.skillsCertificateUrl"
                    :preview-src-list="new Array(storeEmployeeInfo.skillsCertificateUrl)"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :initial-index="4"
                    fit="cover"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="评分情况" name="second">
        <ContentWrap>
          <el-row>
            <el-col :span="12">
              <el-statistic title="总分" :value="scoreStatistics.score">
                <template #prefix>
                  <el-icon style="vertical-align: -0.125em">
                    <Money />
                  </el-icon>
                </template>
              </el-statistic>
            </el-col>
            <el-col :span="12">
              <el-statistic title="分成" :value="50">
                <template #prefix>
                  <el-icon style="vertical-align: -0.125em">
                    <Money />
                  </el-icon>
                </template>
              </el-statistic>
            </el-col>
          </el-row>
        </ContentWrap>
        <ContentWrap>
          <!-- 搜索工作栏 -->
          <el-form
            class="-mb-15px"
            :model="scoreManageParams"
            ref="coreManageQueryFormRef"
            :inline="true"
            label-width="68px"
          >
            <el-form-item label="评分编号" prop="id">
              <el-input
                v-model="scoreManageParams.id"
                placeholder="请输入"
                clearable
                class="!w-240px"
              />
            </el-form-item>
            <el-form-item label="评分类型" prop="performanceType">
              <el-select
                v-model="scoreManageParams.performanceType"
                placeholder="请选择评分类型"
                clearable
                class="!w-240px"
              >
                <el-option
                  v-for="dict in getStrDictOptions(DICT_TYPE.MEIJIA_PERFORMANCE_TYPE)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="添加时间" prop="createTime">
              <el-date-picker
                v-model="scoreManageParams.createTime"
                value-format="YYYY-MM-DD HH:mm:ss"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
                class="!w-240px"
              />
            </el-form-item>
            <el-form-item>
              <el-button @click="handleQueryScoreManage"
                ><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button
              >
              <el-button @click="resetQueryScoreManage"
                ><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button
              >
            </el-form-item>
          </el-form>
          <el-table :data="scoreManageList" :stripe="true" :show-overflow-tooltip="true">
            <el-table-column label="评分编号" align="center" prop="id" />
            <el-table-column label="评分类型" align="center" prop="performanceType">
              <template #default="scope">
                <dict-tag
                  :type="DICT_TYPE.MEIJIA_PERFORMANCE_TYPE"
                  :value="scope.row.performanceType"
                />
              </template>
            </el-table-column>
            <el-table-column label="分值变动" align="center" prop="score" />
            <el-table-column label="原因" align="center" prop="reason" />
            <el-table-column
              label="添加时间"
              align="center"
              prop="createTime"
              :formatter="dateFormatter"
              width="180px"
            />
          </el-table>
          <!-- 分页 -->
          <Pagination
            :total="scoreManageTotal"
            v-model:page="scoreManageParams.pageNo"
            v-model:limit="scoreManageParams.pageSize"
            @pagination="getScoreManageList"
          />
        </ContentWrap>
      </el-tab-pane>
      <el-tab-pane label="业绩订单" name="third">
        <el-table :data="storeOrderList" :stripe="true" :show-overflow-tooltip="true">
          <el-table-column label="订单号" align="center" prop="code" />
          <el-table-column label="订单金额(元)" align="center" prop="actualPaymentCNY" />
          <el-table-column label="所作项目" align="center" prop="projectNames" />
          <el-table-column
            label="完成时间"
            align="center"
            prop="finishTime"
            :formatter="dateFormatter"
            width="180px"
          />
        </el-table>
        <Pagination
          :total="storeOrderTotal"
          v-model:page="orderQueryParams.pageNo"
          v-model:limit="orderQueryParams.pageSize"
          @pagination="getStoreOrderList"
        />
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>
<script setup lang="ts">
import * as StoreEmployeeApi from '@/api/meijia/store/employee'
import * as StoreOrderApi from '@/api/meijia/store/order'
import * as AgentApi from '@/api/meijia/agent'
import * as AgentEmployeeApi from '@/api/meijia/agent/employee'
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import * as ProjectApi from '@/api/meijia/project'
import * as UserDetailApi from '@/api/system/user'
import { dateFormatter } from '@/utils/formatTime'
import * as ScoreManageApi from '@/api/meijia/score/manage'
import { ChatLineRound, Calendar, Money, Timer, Scissor, CreditCard } from '@element-plus/icons-vue'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const storeEmployeeInfo = ref({
  systemUserName: undefined,
  levelLable: undefined,
  systemUserCode: undefined,
  code: undefined
})
const storeOrderList = ref([]) // 订单列表
const storeOrderTotal = ref(0) // 订单列表的总页数
const orderQueryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  code: undefined,
  userCode: undefined,
  status : 5
})
const activeName = ref('first')
const drawer = ref(false)

/** 打开弹窗 */
const open = async (id: number) => {
  drawer.value = true
  storeEmployeeInfo.value = await StoreEmployeeApi.getStoreEmployee(id)
  storeEmployeeInfo.value.levelLable = getStrDictOptions(DICT_TYPE.MEIJIA_HAIRDRESSER_LEVEL).find(
    (m: any) => m.value == storeEmployeeInfo.value.level
  )?.label
  orderQueryParams.userCode = storeEmployeeInfo.value.systemUserCode
  await searchScoreStatistics()
  await getScoreManageList()
  await getStoreOrderList()
}
const getStoreOrderList = async () => {
  const storeOrderData = await StoreOrderApi.getPageByUser(orderQueryParams)
  console.info(storeOrderData)
  storeOrderList.value = storeOrderData.list
  storeOrderTotal.value = storeOrderData.total
}
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

const scoreManageParams = reactive({
  pageNo: 1,
  pageSize: 10,
  id: undefined,
  employeeCode: undefined,
  performanceType: undefined,
  createTime: []
})
const scoreManageList = ref([]) // 订单列表
const scoreManageTotal = ref(0) // 订单列表的总页数
const handleQueryScoreManage = async () => {
  await getScoreManageList()
}
const coreManageQueryFormRef = ref() // 搜索的表单
const resetQueryScoreManage = async () => {
  coreManageQueryFormRef.value.resetFields()
  handleQueryScoreManage()
}
const getScoreManageList = async () => {
  scoreManageParams.employeeCode = storeEmployeeInfo.value.code
  const data = await ScoreManageApi.getScoreManagePageByEmployee(scoreManageParams)
  scoreManageList.value = data.list
  scoreManageTotal.value = data.total
}
const scoreStatistics = ref({
  score: 0
})
const searchScoreStatistics = async () => {
  scoreStatistics.value = await ScoreManageApi.getScoreManageStatisticsByEmployee(
    storeEmployeeInfo.value.code
  )
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
<style scoped>
.el-select {
  width: 100%;
}
.info_item,
.mr-5px {
  margin-right: 10px;
}
.img {
  margin-left: 20px;
}
</style>
